<script setup>
import { ref, computed, onMounted } from 'vue'
import { useProgressStore } from '../stores/progress'
import { useDietStore } from '../stores/diet'
import { useExerciseStore } from '../stores/exercise'

/**
 * 获取进度状态管理
 */
const progressStore = useProgressStore()
const dietStore = useDietStore()
const exerciseStore = useExerciseStore()

/**
 * 当前活跃标签
 */
const activeTab = ref('weight')

/**
 * 切换标签
 * @param {string} tab - 标签名称
 */
const switchTab = (tab) => {
  activeTab.value = tab
}

/**
 * 体重趋势数据格式化
 */
const weightData = computed(() => {
  return progressStore.weightLog.map(item => {
    // 将日期格式化为月-日
    const date = new Date(item.date)
    const formattedDate = `${date.getMonth() + 1}/${date.getDate()}`
    return {
      date: formattedDate,
      weight: item.weight
    }
  })
})

/**
 * 最近30天的体重数据 - 用于图表
 */
const recentWeightData = computed(() => {
  return weightData.value.slice(-15)
})

/**
 * 卡路里摄入/消耗趋势数据
 */
const caloriesData = computed(() => {
  return progressStore.caloriesLog
})

/**
 * 计算近期体重变化趋势
 * 负数表示下降（减轻），正数表示上升（增加）
 */
const recentWeightTrend = computed(() => {
  const trend = progressStore.weightTrend
  return {
    value: Math.abs(trend),
    direction: trend < 0 ? 'down' : 'up'
  }
})

/**
 * 身体围度数据
 */
const measurements = computed(() => {
  return progressStore.measurements
})

/**
 * 最新的测量数据
 */
const latestMeasurement = computed(() => {
  if (measurements.value.length === 0) return null
  return measurements.value[measurements.value.length - 1]
})

/**
 * 计算BMI分类
 */
const getBmiCategory = (bmi) => {
  if (bmi < 18.5) return { label: '偏瘦', color: 'text-blue-500' }
  if (bmi < 24) return { label: '正常', color: 'text-green-500' }
  if (bmi < 28) return { label: '偏胖', color: 'text-yellow-500' }
  return { label: '肥胖', color: 'text-red-500' }
}

/**
 * 显示图表时的X轴日期
 */
const getChartLabels = computed(() => {
  return recentWeightData.value.map(item => item.date)
})

/**
 * 显示图表时的Y轴体重数据
 */
const getChartValues = computed(() => {
  return recentWeightData.value.map(item => item.weight)
})

/**
 * 记录新体重
 */
const newWeight = ref('')
const isSubmitting = ref(false)

const recordWeight = () => {
  if (!newWeight.value || isSubmitting.value) return
  
  isSubmitting.value = true
  
  // 模拟网络请求
  setTimeout(() => {
    progressStore.addWeightRecord(parseFloat(newWeight.value))
    newWeight.value = ''
    isSubmitting.value = false
  }, 500)
}

/**
 * 图表显示模式
 * 'bar' - 柱状图
 * 'line' - 折线图
 */
const chartMode = ref('bar')

/**
 * 切换图表模式
 * @param {string} mode - 图表模式
 */
const switchChartMode = (mode) => {
  chartMode.value = mode
}

/**
 * 计算图表数据，根据屏幕宽度限制数据点数量
 */
const displayedWeightData = computed(() => {
  // 移动端显示最近7天数据，平板及以上设备显示更多数据
  const isMobile = window.innerWidth < 640
  return recentWeightData.value.slice(isMobile ? -7 : -15)
})

// 监听窗口大小变化
onMounted(() => {
  // 真实项目中这里需要使用图表库如 Chart.js 或 ECharts 来渲染图表
  console.log('图表组件已加载')
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    // 根据屏幕宽度自动切换图表模式
    if (window.innerWidth < 480 && chartMode.value === 'bar') {
      chartMode.value = 'line'
    }
  })
  
  // 初始化时检查屏幕宽度
  if (window.innerWidth < 480) {
    chartMode.value = 'line'
  }
})
</script>

<template>
  <div class="tracking-view">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <h1>数据跟踪</h1>
    </div>
    
    <!-- 标签切换 -->
    <div class="tabs">
      <div 
        class="tab" 
        :class="{ active: activeTab === 'weight' }"
        @click="switchTab('weight')"
      >
        体重趋势
      </div>
      <div 
        class="tab" 
        :class="{ active: activeTab === 'body' }"
        @click="switchTab('body')"
      >
        身体围度
      </div>
      <div 
        class="tab" 
        :class="{ active: activeTab === 'calories' }"
        @click="switchTab('calories')"
      >
        卡路里
      </div>
    </div>
    
    <!-- 体重趋势内容 -->
    <div v-if="activeTab === 'weight'" class="content-container">
      <!-- 当前体重卡片 -->
      <div class="current-weight-card">
        <div class="card-header">
          <h2>当前体重</h2>
          <div class="weight-trend">
            <i class="fas" :class="recentWeightTrend.direction === 'down' ? 'fa-arrow-down text-green-500' : 'fa-arrow-up text-red-500'"></i>
            <span :class="recentWeightTrend.direction === 'down' ? 'text-green-500' : 'text-red-500'">{{ recentWeightTrend.value }} kg</span>
          </div>
        </div>
        
        <div class="weight-display">
          <span class="current-weight">{{ progressStore.currentWeight }}</span>
          <span class="weight-unit">kg</span>
        </div>
        
        <div class="weight-progress">
          <div class="progress-labels">
            <span>开始：{{ progressStore.startWeight }}kg</span>
            <span>目标：{{ progressStore.targetWeight }}kg</span>
          </div>
          <div class="progress-bar">
            <div class="progress-filled" :style="`width: ${progressStore.weightLossProgress}%`"></div>
          </div>
          <div class="progress-percentage">{{ progressStore.weightLossProgress }}%</div>
        </div>
      </div>
      
      <!-- 体重记录表单 -->
      <div class="record-weight-card">
        <h2>记录今日体重</h2>
        <div class="record-form">
          <div class="input-group">
            <input 
              type="number" 
              v-model="newWeight" 
              placeholder="输入体重 (kg)" 
              step="0.1"
              min="30"
              max="200"
              class="weight-input"
            >
            <span class="input-unit">kg</span>
          </div>
          <button 
            class="record-btn" 
            @click="recordWeight"
            :disabled="!newWeight || isSubmitting"
          >
            <i class="fas fa-plus"></i>
            记录
          </button>
        </div>
      </div>
      
      <!-- 体重趋势图表 -->
      <div class="weight-chart-card">
        <div class="chart-header">
          <h2>体重趋势</h2>
          <div class="chart-mode-selector">
            <button 
              class="mode-btn" 
              :class="{ active: chartMode === 'bar' }"
              @click="switchChartMode('bar')"
            >
              柱状图
            </button>
            <button 
              class="mode-btn" 
              :class="{ active: chartMode === 'line' }"
              @click="switchChartMode('line')"
            >
              折线图
            </button>
          </div>
        </div>
        
        <div class="chart-container">
          <!-- 柱状图 -->
          <div class="chart-placeholder" v-if="chartMode === 'bar'">
            <div class="chart-bars">
              <div 
                v-for="(item, index) in displayedWeightData" 
                :key="index"
                class="chart-bar"
                :style="{
                  height: `${(item.weight - progressStore.targetWeight) * 10}px`,
                  backgroundColor: item.weight > progressStore.weightLog[0].weight ? '#EF4444' : '#22C55E'
                }"
              >
                <span class="bar-label">{{ item.weight }}</span>
              </div>
            </div>
            <div class="chart-labels">
              <span 
                v-for="(item, index) in displayedWeightData" 
                :key="index"
                class="label"
              >
                {{ item.date }}
              </span>
            </div>
          </div>
          
          <!-- 折线图 -->
          <div class="chart-placeholder line-chart" v-else>
            <svg class="weight-line-chart" viewBox="0 0 100 100" preserveAspectRatio="none">
              <!-- 横向网格线 -->
              <line x1="0" y1="0" x2="100" y2="0" class="grid-line" />
              <line x1="0" y1="25" x2="100" y2="25" class="grid-line" />
              <line x1="0" y1="50" x2="100" y2="50" class="grid-line" />
              <line x1="0" y1="75" x2="100" y2="75" class="grid-line" />
              <line x1="0" y1="100" x2="100" y2="100" class="grid-line" />
              
              <!-- 折线 -->
              <polyline
                :points="displayedWeightData.map((item, index) => {
                  const x = index * (100 / (displayedWeightData.length - 1));
                  // 计算y值 - 将体重值映射到图表高度
                  const min = Math.min(...displayedWeightData.map(d => d.weight));
                  const max = Math.max(...displayedWeightData.map(d => d.weight));
                  const range = max - min;
                  const y = 100 - ((item.weight - min) / (range || 1)) * 80;
                  return `${x},${y}`;
                }).join(' ')"
                class="weight-line"
                fill="none"
              />
              
              <!-- 数据点 -->
              <template v-for="(item, index) in displayedWeightData" :key="index">
                <circle
                  :cx="index * (100 / (displayedWeightData.length - 1))"
                  :cy="(() => {
                    const min = Math.min(...displayedWeightData.map(d => d.weight));
                    const max = Math.max(...displayedWeightData.map(d => d.weight));
                    const range = max - min;
                    return 100 - ((item.weight - min) / (range || 1)) * 80;
                  })()"
                  r="2"
                  class="weight-point"
                  :data-weight="item.weight"
                />
              </template>
            </svg>
            
            <div class="line-chart-labels">
              <span 
                v-for="(item, index) in displayedWeightData" 
                :key="index"
                class="line-label"
                :style="{
                  left: `${index * (100 / (displayedWeightData.length - 1))}%`
                }"
              >
                {{ item.date }}
              </span>
            </div>
            
            <div class="line-chart-values">
              <span 
                v-for="(item, index) in displayedWeightData" 
                :key="index"
                class="line-value"
                :style="{
                  left: `${index * (100 / (displayedWeightData.length - 1))}%`,
                  top: `${(() => {
                    const min = Math.min(...displayedWeightData.map(d => d.weight));
                    const max = Math.max(...displayedWeightData.map(d => d.weight));
                    const range = max - min;
                    return 100 - ((item.weight - min) / (range || 1)) * 80;
                  })()}%`
                }"
              >
                {{ item.weight }}
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 体重记录列表 -->
      <div class="weight-log-card">
        <h2 class="weight-log-title">历史记录</h2>
        <div class="log-list">
          <div 
            v-for="(item, index, i) in progressStore.weightLog.slice().reverse().slice(0, 7)" 
            :key="index"
            class="log-item"
            :class="{'log-item-alt': index % 2 === 1}"
          >
            <div class="log-left">
              <div class="log-date">{{ item.date }}</div>
              <div v-if="index < progressStore.weightLog.length - 1" class="weight-trend">
                <i class="fas" 
                  :class="[
                    item.weight < progressStore.weightLog.slice().reverse()[index + 1].weight 
                      ? 'fa-arrow-down weight-down'
                      : item.weight > progressStore.weightLog.slice().reverse()[index + 1].weight
                        ? 'fa-arrow-up weight-up'
                        : 'fa-minus weight-same'
                  ]"
                ></i>
              </div>
            </div>
            <div class="log-weight">{{ item.weight }} <span class="unit">kg</span></div>
          </div>
        </div>
        <div class="log-legend">
          <div class="legend-item">
            <i class="fas fa-arrow-down weight-down"></i>
            <span>体重下降</span>
          </div>
          <div class="legend-item">
            <i class="fas fa-arrow-up weight-up"></i>
            <span>体重上升</span>
          </div>
          <div class="legend-item">
            <i class="fas fa-minus weight-same"></i>
            <span>体重不变</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 身体围度内容 -->
    <div v-else-if="activeTab === 'body'" class="content-container">
      <!-- 最新的围度测量 -->
      <div class="measurements-card" v-if="latestMeasurement">
        <h2>最新测量 ({{ latestMeasurement.date }})</h2>
        <div class="measurement-grid">
          <div class="measurement-item">
            <div class="item-icon chest">
              <i class="fas fa-male"></i>
            </div>
            <div class="item-data">
              <span class="item-label">胸围</span>
              <div class="item-value">
                <span class="value">{{ latestMeasurement.chest }}</span>
                <span class="unit">cm</span>
              </div>
            </div>
          </div>
          
          <div class="measurement-item">
            <div class="item-icon waist">
              <i class="fas fa-male"></i>
            </div>
            <div class="item-data">
              <span class="item-label">腰围</span>
              <div class="item-value">
                <span class="value">{{ latestMeasurement.waist }}</span>
                <span class="unit">cm</span>
              </div>
            </div>
          </div>
          
          <div class="measurement-item">
            <div class="item-icon hips">
              <i class="fas fa-male"></i>
            </div>
            <div class="item-data">
              <span class="item-label">臀围</span>
              <div class="item-value">
                <span class="value">{{ latestMeasurement.hips }}</span>
                <span class="unit">cm</span>
              </div>
            </div>
          </div>
          
          <div class="measurement-item">
            <div class="item-icon thigh">
              <i class="fas fa-male"></i>
            </div>
            <div class="item-data">
              <span class="item-label">大腿围</span>
              <div class="item-value">
                <span class="value">{{ latestMeasurement.thigh }}</span>
                <span class="unit">cm</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 围度变化 -->
      <div class="measurements-changes-card">
        <h2>围度变化</h2>
        <div class="changes-list">
          <div class="change-item">
            <div class="change-label">腰围</div>
            <div class="change-values">
              <span class="start-value">{{ measurements[0].waist }}cm</span>
              <div class="change-bar">
                <div 
                  class="change-filled" 
                  :style="`width: ${100 - (latestMeasurement.waist / measurements[0].waist * 100)}%`"
                ></div>
              </div>
              <span class="current-value">{{ latestMeasurement.waist }}cm</span>
            </div>
            <div class="change-diff decreased">
              -{{ (measurements[0].waist - latestMeasurement.waist).toFixed(1) }}cm
            </div>
          </div>
          
          <div class="change-item">
            <div class="change-label">臀围</div>
            <div class="change-values">
              <span class="start-value">{{ measurements[0].hips }}cm</span>
              <div class="change-bar">
                <div 
                  class="change-filled" 
                  :style="`width: ${100 - (latestMeasurement.hips / measurements[0].hips * 100)}%`"
                ></div>
              </div>
              <span class="current-value">{{ latestMeasurement.hips }}cm</span>
            </div>
            <div class="change-diff decreased">
              -{{ (measurements[0].hips - latestMeasurement.hips).toFixed(1) }}cm
            </div>
          </div>
          
          <div class="change-item">
            <div class="change-label">胸围</div>
            <div class="change-values">
              <span class="start-value">{{ measurements[0].chest }}cm</span>
              <div class="change-bar">
                <div 
                  class="change-filled" 
                  :style="`width: ${100 - (latestMeasurement.chest / measurements[0].chest * 100)}%`"
                ></div>
              </div>
              <span class="current-value">{{ latestMeasurement.chest }}cm</span>
            </div>
            <div class="change-diff decreased">
              -{{ (measurements[0].chest - latestMeasurement.chest).toFixed(1) }}cm
            </div>
          </div>
          
          <div class="change-item">
            <div class="change-label">大腿围</div>
            <div class="change-values">
              <span class="start-value">{{ measurements[0].thigh }}cm</span>
              <div class="change-bar">
                <div 
                  class="change-filled" 
                  :style="`width: ${100 - (latestMeasurement.thigh / measurements[0].thigh * 100)}%`"
                ></div>
              </div>
              <span class="current-value">{{ latestMeasurement.thigh }}cm</span>
            </div>
            <div class="change-diff decreased">
              -{{ (measurements[0].thigh - latestMeasurement.thigh).toFixed(1) }}cm
            </div>
          </div>
        </div>
      </div>
      
      <!-- 添加新测量按钮 -->
      <div class="add-measurement-btn">
        <i class="fas fa-plus"></i>
        添加新测量
      </div>
    </div>
    
    <!-- 卡路里内容 -->
    <div v-else-if="activeTab === 'calories'" class="content-container">
      <!-- 今日卡路里摘要 -->
      <div class="today-calories-card">
        <h2>今日卡路里</h2>
        <div class="calories-balance">
          <div class="calories-item intake">
            <div class="calories-value">{{ dietStore.caloriesIntake }}</div>
            <div class="calories-label">摄入</div>
          </div>
          <div class="calories-separator">-</div>
          <div class="calories-item burned">
            <div class="calories-value">{{ exerciseStore.caloriesBurned }}</div>
            <div class="calories-label">消耗</div>
          </div>
          <div class="calories-separator">=</div>
          <div class="calories-item balance">
            <div class="calories-value">{{ dietStore.caloriesIntake - exerciseStore.caloriesBurned }}</div>
            <div class="calories-label">净值</div>
          </div>
        </div>
      </div>
      
      <!-- 卡路里趋势图表 -->
      <div class="calories-chart-card">
        <h2>卡路里趋势</h2>
        <div class="chart-tabs">
          <div class="chart-tab active">周趋势</div>
          <div class="chart-tab">月趋势</div>
        </div>
        <div class="calories-chart">
          <div class="bar-chart">
            <div 
              v-for="(item, index) in caloriesData" 
              :key="index"
              class="chart-column"
            >
              <div class="column-bars">
                <div 
                  class="column-bar intake"
                  :style="`height: ${item.intake / 30}px`"
                >
                  {{ item.intake }}
                </div>
                <div 
                  class="column-bar burned"
                  :style="`height: ${item.burned / 30}px`"
                >
                  {{ item.burned }}
                </div>
              </div>
              <div class="column-label">{{ item.week }}</div>
            </div>
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <div class="legend-color intake"></div>
              <div class="legend-label">摄入</div>
            </div>
            <div class="legend-item">
              <div class="legend-color burned"></div>
              <div class="legend-label">消耗</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 每周卡路里统计 -->
      <div class="weekly-calories-card">
        <h2>每周统计</h2>
        <div class="weekly-list">
          <div 
            v-for="(item, index) in caloriesData" 
            :key="index"
            class="weekly-item"
          >
            <div class="weekly-header">
              <div class="weekly-title">{{ item.week }}</div>
              <div class="weekly-balance" :class="item.intake > item.burned ? 'negative' : 'positive'">
                {{ item.intake > item.burned ? '+' : '-' }}{{ Math.abs(item.intake - item.burned) }} kcal
              </div>
            </div>
            <div class="weekly-progress">
              <div class="progress-bar">
                <div 
                  class="progress-intake"
                  :style="`width: ${(item.intake / (item.intake + item.burned)) * 100}%`"
                ></div>
                <div 
                  class="progress-burned"
                  :style="`width: ${(item.burned / (item.intake + item.burned)) * 100}%`"
                ></div>
              </div>
              <div class="progress-labels">
                <div class="label-intake">摄入: {{ item.intake }} kcal</div>
                <div class="label-burned">消耗: {{ item.burned }} kcal</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tracking-view {
  padding-bottom: 80px;
}

/* 导航栏 */
.nav-bar {
  padding: 16px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

.nav-bar h1 {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
  font-weight: 600;
}

/* 标签切换 */
.tabs {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.tab {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  font-size: 1rem;
  color: #666;
  cursor: pointer;
  position: relative;
}

.tab.active {
  color: #22C55E;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 40%;
  height: 3px;
  background-color: #22C55E;
  border-radius: 3px 3px 0 0;
}

/* 内容容器 */
.content-container {
  padding: 0 16px;
}

/* 体重相关卡片 */
.current-weight-card,
.record-weight-card,
.weight-chart-card,
.weight-log-card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h2 {
  margin: 0;
  font-size: 1.125rem;
  color: #333;
  font-weight: 600;
}

.weight-trend {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
}

.weight-trend i {
  margin-right: 4px;
}

.weight-display {
  text-align: center;
  margin-bottom: 16px;
}

.current-weight {
  font-size: 3rem;
  font-weight: 700;
  color: #333;
}

.weight-unit {
  font-size: 1.5rem;
  color: #666;
  margin-left: 4px;
}

.weight-progress {
  margin-top: 16px;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 8px;
}

.progress-bar {
  height: 8px;
  background-color: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-filled {
  height: 100%;
  background-color: #22C55E;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-percentage {
  text-align: right;
  font-size: 0.875rem;
  color: #22C55E;
  font-weight: 500;
}

/* 记录体重表单 */
h2 {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  color: #333;
  font-weight: 600;
}

.record-form {
  display: flex;
  gap: 12px;
}

.input-group {
  flex: 1;
  position: relative;
}

.weight-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 1rem;
  color: #333;
}

.input-unit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 0.875rem;
}

.record-btn {
  padding: 0 16px;
  background-color: #22C55E;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.record-btn:disabled {
  background-color: #9CA3AF;
  cursor: not-allowed;
}

/* 图表 */
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-mode-selector {
  display: flex;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
}

.mode-btn {
  padding: 6px 12px;
  background-color: white;
  border: none;
  font-size: 0.75rem;
  color: #666;
  cursor: pointer;
}

.mode-btn.active {
  background-color: #22C55E;
  color: white;
}

.chart-container {
  height: 200px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.chart-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 100%;
}

/* 柱状图样式 */
.chart-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 20px;
  min-width: max-content;
}

.chart-bar {
  width: 24px;
  margin: 0 8px;
  background-color: #22C55E;
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: height 0.5s ease;
}

.bar-label {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #666;
  white-space: nowrap;
}

.chart-labels {
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: max-content;
}

.chart-labels .label {
  width: 40px;
  font-size: 0.75rem;
  color: #666;
  text-align: center;
  margin: 0 8px;
  white-space: nowrap;
}

/* 折线图样式 */
.line-chart {
  position: relative;
  width: 100%;
  height: 100%;
}

.weight-line-chart {
  width: 100%;
  height: 100%;
  background-color: #F9FAFB;
  border-radius: 8px;
}

.grid-line {
  stroke: rgba(229, 231, 235, 0.5);
  stroke-width: 0.5;
}

.weight-line {
  stroke: #22C55E;
  stroke-width: 2;
}

.weight-point {
  fill: #22C55E;
  stroke: white;
  stroke-width: 1;
}

.weight-point:hover {
  fill: #16A34A;
  r: 3;
}

.line-chart-labels {
  display: flex;
  width: 100%;
  position: relative;
  margin-top: 8px;
  height: 20px;
}

.line-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #666;
  white-space: nowrap;
}

.line-chart-values {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.line-value {
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #333;
  display: none;
}

.weight-point:hover + .line-value {
  display: block;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .chart-bar {
    width: 20px;
    margin: 0 4px;
  }
  
  .chart-labels .label {
    width: 28px;
    margin: 0 4px;
    font-size: 0.7rem;
  }
}

@media (min-width: 640px) {
  .chart-bar {
    width: 32px;
    margin: 0 8px;
  }
  
  .chart-labels .label {
    width: 48px;
    margin: 0 8px;
  }
  
  .chart-container {
    height: 250px;
  }
}

/* 身体围度相关 */
.measurements-card,
.measurements-changes-card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.measurement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.measurement-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #F9FAFB;
  border-radius: 8px;
}

.item-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin-right: 12px;
  flex-shrink: 0;
}

.chest {
  background-color: #3B82F6;
}

.waist {
  background-color: #22C55E;
}

.hips {
  background-color: #F59E0B;
}

.thigh {
  background-color: #EC4899;
}

.item-data {
  flex: 1;
}

.item-label {
  font-size: 0.75rem;
  color: #666;
  display: block;
  margin-bottom: 4px;
}

.item-value {
  display: flex;
  align-items: baseline;
}

.value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.unit {
  font-size: 0.75rem;
  color: #666;
  margin-left: 2px;
}

/* 围度变化 */
.changes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.change-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.change-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}

.change-values {
  display: flex;
  align-items: center;
  gap: 8px;
}

.start-value,
.current-value {
  font-size: 0.75rem;
  color: #666;
  width: 45px;
}

.current-value {
  text-align: right;
}

.change-bar {
  flex: 1;
  height: 6px;
  background-color: #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
}

.change-filled {
  height: 100%;
  background-color: #22C55E;
  border-radius: 3px;
}

.change-diff {
  align-self: flex-end;
  font-size: 0.875rem;
  font-weight: 500;
}

.decreased {
  color: #22C55E;
}

.increased {
  color: #EF4444;
}

/* 添加测量按钮 */
.add-measurement-btn {
  margin: 0 16px 16px;
  padding: 12px;
  background-color: #22C55E;
  color: white;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

/* 卡路里相关 */
.today-calories-card,
.calories-chart-card,
.weekly-calories-card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.calories-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

.calories-item {
  text-align: center;
}

.calories-value {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.calories-label {
  font-size: 0.875rem;
  color: #666;
}

.calories-separator {
  margin: 0 12px;
  font-size: 1.5rem;
  color: #666;
  line-height: 1;
}

.intake .calories-value {
  color: #F59E0B;
}

.burned .calories-value {
  color: #22C55E;
}

.balance .calories-value {
  color: #3B82F6;
}

/* 卡路里图表 */
.chart-tabs {
  display: flex;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 16px;
}

.chart-tab {
  padding: 8px 16px;
  font-size: 0.875rem;
  color: #666;
  cursor: pointer;
}

.chart-tab.active {
  color: #22C55E;
  border-bottom: 2px solid #22C55E;
  font-weight: 500;
}

.calories-chart {
  height: 250px;
  margin-top: 16px;
}

.bar-chart {
  height: 220px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.column-bars {
  display: flex;
  height: 180px;
  align-items: flex-end;
  gap: 4px;
}

.column-bar {
  width: 24px;
  border-radius: 4px 4px 0 0;
  color: white;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}

.column-bar.intake {
  background-color: #F59E0B;
}

.column-bar.burned {
  background-color: #22C55E;
}

.column-label {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #666;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.legend-color.intake {
  background-color: #F59E0B;
}

.legend-color.burned {
  background-color: #22C55E;
}

.legend-label {
  font-size: 0.875rem;
  color: #666;
}

/* 每周统计 */
.weekly-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weekly-item {
  background-color: #F9FAFB;
  border-radius: 8px;
  padding: 12px;
}

.weekly-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.weekly-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
}

.weekly-balance {
  font-size: 0.875rem;
  font-weight: 500;
}

.weekly-balance.positive {
  color: #22C55E;
}

.weekly-balance.negative {
  color: #EF4444;
}

.weekly-progress {
  margin-top: 8px;
}

.progress-bar {
  height: 8px;
  background-color: transparent;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin-bottom: 8px;
}

.progress-intake {
  height: 100%;
  background-color: #F59E0B;
  border-radius: 4px 0 0 4px;
}

.progress-burned {
  height: 100%;
  background-color: #22C55E;
  border-radius: 0 4px 4px 0;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
}

/* 历史记录 */
.weight-log-card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.weight-log-title {
  margin-bottom: 16px;
  font-size: 1.125rem;
  color: var(--text-primary, #333);
  font-weight: 600;
  display: flex;
  align-items: center;
}

.weight-log-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #22C55E;
  margin-right: 8px;
  border-radius: 2px;
}

.log-list {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(229, 231, 235, 0.7);
}

.log-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background-color: white;
  transition: background-color 0.2s ease;
  position: relative;
}

.log-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: rgba(229, 231, 235, 0.5);
}

.log-item-alt {
  background-color: rgba(249, 250, 251, 0.7);
}

.log-item:hover {
  background-color: rgba(220, 252, 231, 0.3);
}

.log-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.log-date {
  font-size: 0.875rem;
  color: #666;
  min-width: 85px;
}

.log-weight {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: baseline;
}

.unit {
  font-size: 0.75rem;
  font-weight: normal;
  color: #666;
  margin-left: 2px;
}

.weight-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(249, 250, 251, 0.7);
}

.weight-down {
  color: #22C55E;
}

.weight-up {
  color: #EF4444;
}

.weight-same {
  color: #9CA3AF;
}

.log-legend {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 12px;
  padding: 0 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #666;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .log-legend {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
  }
}
</style> 